
<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="系统管理员"
      sub-title="管理角色"
    />

    <a-form style="margin-top: 50px">
      <a-table
        :columns="columns"
        :data-source="page.list"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template #role_id="{ text }"> 角色ID：{{ text }} </template>

        <template #role_web="{ text }"> 角色路由：{{ text }} </template>

        <template #action="{ record }">
          <span>
            <a @click="deleteRole(record)">删除</a>
            <a-divider type="vertical" />
            <a @click="openWebChange(record)">修改角色路由</a>
          </span>
        </template>
      </a-table>
    </a-form>

    <a-modal v-model:visible="visible1" title="更改路由" @ok="changeRoleWeb">
    <a-form-item
      label="新路由路径"
      has-feedback
      :validateStatus="type1"
      :help="message1"
    >
      <a-input
        v-model:value="changeWeb.new_web"
        placeholder="请输入新的路由路径"
        @change="checkWeb"
      />
    </a-form-item>
  </a-modal>

  </div>
</template>

<script setup>
////////////////////////////////////////////
import { reactive, ref } from "vue";
import { post, setLocalToken } from "@/common";
import { useRouter } from "vue-router";
// import { route }from "vue-router";
import { get } from "@/common";
import { message } from "ant-design-vue";
///////////////////////////////////////////
const page = ref({});

const role = reactive({
  role_id: "",
  role_web:""
});

const changeWeb = reactive({
  role_id:"",
  new_web:""
})

const type1 = ref("");
const message1 = ref("");

const type3 = ref("");
const message3 = ref("");

const type2 = ref("");
const message2 = ref("");

const visible1 = ref(false);
const visible2 = ref(false);


const columns = [
  {
    dataIndex: "role_id", //
    title: "角色ID",
    slots: {
      customRender: "role_id",
    },
  },
  {
    dataIndex: "role_web", //
    title: "角色路由",
    slots: {
      customRender: "role_web",
    },
  },
  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action",
    },
  },
];
///////////////////////////////////////////
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

const getPage = (pageNum = 1) => {
  role.pageNum = pageNum;
  role.pageSize = pagination.pageSize;


  get("/admin/role/getRoleInfo", role).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;

    console.log(res.data.list);
  });
};

getPage(1);

const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

//////////////////////////////////////////
const checkWeb = () =>{
  if(changeWeb.new_web.indexOf("/") == 0){
    type1.value = "success";
    message1.value = "";
  } else {
    type1.value = "error";
    message1.value = "请检查路由格式";
  }
}

const changeRoleWeb = () =>{
  post('/admin/role/changeRoleWeb',changeWeb).then((res)=>{
    if(res.success){
      message.success(res.message);
      getPage(1);
      visible1.value=false;
    }else{
      message.error(res.message);
    }
  })
}

 const deleteRole=(record)=>{
   role.role_id = record.role_id;
    post('/admin/role/deleteRole',role).then((res)=>{
      if(res.success){
      message.success(res.message);
      getPage(1);
    }else{
      message.error(res.message);
    }
    })
 }

const openWebChange = (record) => {
  changeWeb.role_id=record.role_id;
  visible1.value = true;
};
///////////////////////////////////////////
</script>

<style>
</style>